<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-container>
      <el-header>
        <el-page-header content="登录" @back="$router.back()"> </el-page-header>
      </el-header>

      <el-main>
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix" v-if="cut==1">
            <span>短信登录</span>
          </div>
          <div slot="header" class="clearfix" v-if="cut==0">
            <span>密码登录</span>
          </div>
          <div class="text">
            <el-form
              :model="loginInfo"
              :rules="rules"
              status-icon
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              size="medium"
            >
              <el-form-item prop="phone" id="phone">
                <span slot="label">
                  <span class="item">手机号码</span>
                </span>
                <el-input
                  type="text"
                  v-model="loginInfo.phone"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <span class="tip" v-if="cut==1">没有注册的手机号将自动注册</span>
                <el-link
                  type="primary"
                  :underline="false"
                  class="register"
                  @click="goRegister()"
                  >注册</el-link
                >
              </el-form-item>

              <el-form-item  prop="captcha" v-if="cut==1">
                
                <span slot="label">
                  <span class="item">验证码</span>
                </span>




                <el-input
                  type="text"
                  v-model="loginInfo.captcha"
                  autocomplete="off"
                  v-on:keyup.enter.native="submitForm('ruleForm')"
                >
                  <el-button slot="append" icon="el-icon-message" type="primary"  >
                    <span v-show="show" @click="getCode()">发送验证码</span>
                    <span v-show="!show" >{{count}}s重新发送</span>
                    
                    
                    </el-button>
                </el-input>
              </el-form-item>

              <el-form-item  prop="password" id="password" v-if="cut==0">
                <span slot="label">
                  <span class="item">密码</span>
                </span>


                <el-input
                  name="password"
                  :type="pwdType"
                  v-model="loginInfo.password"
                  v-on:keyup.enter.native="submitForm('ruleForm')"
                  autocomplete="on"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>

              <el-form-item class="LoginPassword">
                <el-link type="primary" :underline="false" v-if="cut==1" @click="LoginPassword()"
                  >密码登录</el-link
                >

                <el-link type="primary" :underline="false" v-if="cut==0" @click="LoginCode()"
                  >短信登录</el-link
                >

                <el-link
                  type="primary"
                  :underline="false"
                  class="change-password"
                  @click="goForgetPassword()"
                  >忘记密码？</el-link
                >
              </el-form-item>

              <el-form-item>
                <el-button type="primary" class="Login"  @click="submitForm('ruleForm')">登录</el-button>
                <el-button  @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>

              <el-form-item></el-form-item>
            </el-form>
            
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {passwordLogin,sendMsg,msgLogin} from '@/api/user'
import {setToken} from '@/request/token'

export default {
  data() {
    var isPhone = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
    var checkPhone=(rule,value,callback)=>{
      setTimeout(()=>{
        if(value===null||!isPhone.test(value)||value===''){
          callback(new Error('请输入正确手机号'))
        }else{
        callback()
      }
      },500)
      
    };
    var checkCaptcha=(rule,value,callback)=>{
      if(value===''||value===null){
        callback(new Error('验证码不能为空！'))
      
    }else{
        callback()
      }
  };
    var checkPassword=(rule,value,callback)=>{
      if(!value){
        callback(new Error('密码不能为空！'))
      }else{
        callback()
      }
     
    };
    return {
      loginInfo: {
        phone: "",
        captcha: "",
        password: "",
      },
      rules:{
        phone:[
          {validator:checkPhone,trigger:'blur'}
        ],
        captcha:[
          {validator: checkCaptcha,trigger:'blur'}
        ],
        password:[
          {validator:checkPassword,trigger:'blur'}
        ]
      },
      loading: false,
      pwdType: "password",
      cut: 1,
      timer: null,
      count:'',
      show: true,
      msg:''
    };
  }
  ,
  methods:{
    goRegister() {
      this.$router.push({
        name: "register",
      });
    },
    goForgetPassword() {
      this.$router.push({
        name: "forgetPassword",
      });

    },
    LoginPassword() {
      this.cut = 0;

    },
    LoginCode() {
      this.cut = 1;
    },
    getCode() {
      var isPhone = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
      if(this.loginInfo.phone===null||!isPhone.test(this.loginInfo.phone)||this.loginInfo.phone===''){
        return  this.$message.warning("请输入正确手机号")
      }
      const  time_count = 60;
      if (!this.timer) {
        this.count = time_count;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count >0 && this.count <= time_count) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          } 
        },1000)
      }
      const user={
        phone:this.loginInfo.phone
      }
      sendMsg(user).then(res=>{
        this.msg=res.data
      })
    },
    submitForm(formName) {
      
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.cut===0){
            const loginMsg={
              phone:this.loginInfo.phone,
              password:this.loginInfo.password
            }
            passwordLogin(loginMsg).then(res=>{
          
              if(res.success){
                this.$message.success('登陆成功，欢迎您');
                setToken(res.data)
                this.$router.push("/home")
              }
              else{
                this.$message.error('登陆失败，手机号或密码错误');
              }
              
            })

          }else{
            if(this.loginInfo.captcha!==this.msg){
            return this.$message.error("验证码错误")
          }
          const user={
            phone:this.loginInfo.phone,
          
          }
          msgLogin(user).then(res=>{
            if(res.success){           
                setToken(res.data)
                this.$router.push("/home")
              return  this.$message.success('登录成功，欢迎您');
            }
           
          })
          } 
        }else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
};
</script>

<style scoped lang="less">

// /deep/.el-page-header__content {
//   color: ;
// }
.Login {
  margin-left: -70px;
}
.tip {
  // margin: 0 auto;
  margin-left: -15px;

  padding: 0;
  font-size: 12px;
  color: rgb(117, 115, 115);
}

.LoginPassword {
  margin-left: -45px;
}
.register {
  margin-left: 20px;
}

.change-password {
  margin-left: 20px;
}

.el-input-group__append button.el-button,
.el-input-group__append div.el-select .el-input__inner,
.el-input-group__append div.el-select:hover .el-input__inner,
.el-input-group__prepend button.el-button,
.el-input-group__prepend div.el-select .el-input__inner,
.el-input-group__prepend div.el-select:hover .el-input__inner {
  color: #fff;
  background-color: #409eff;
  border: #409eff;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}


.text {
  font-size: 14px;
}

.item {
  
  color: rgb(22, 20, 20);

  font-size: 20px;
  float: left;
}
.clearfix{
  font-size: 25px;
  color: rgb(20, 164, 216);
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {

  height: 350px;
  padding: 20px;
  margin: 0 auto;
  width: 380px;

  box-shadow: 4px 4px 8px 5px rgb(161, 188, 200);

  /* background-color: rgba(80, 182, 233, 0.44); */
  // background: url("@/assets/img/register.jpg");
  background-size: cover;
  background-position: center center;

  /* -webkit-background-size: cover; */
  background-repeat: no-repeat;

  background-attachment: fixed;
  border-radius: 20px;


}
</style>